<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ITAEM</title>
    <link href="lib/layui.css" type="text/css" rel="stylesheet">
    <script src="lib/vue-2.4.0.js" type="text/javascript"></script>
    <script src="lib/vue-resource-1.3.4.js"></script>
</head>
<body>
<div id="app" class="layui-container">
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">标题</label>
            <div class="layui-input-block">
                <input v-model="title" type="text" placeholder="title" class="layui-input" autocomplete="off">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">链接</label>
            <div class="layui-input-block">
                <input v-model="link" type="text" placeholder="https://www.baidu.com/" class="layui-input"
                       autocomplete="off">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">作者</label>
            <div class="layui-input-block">
                <input v-model="author" type="text" placeholder="author" class="layui-input" autocomplete="off">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否展示</label>
            <div class="layui-input-block">
                <input v-model="tag" type="text" placeholder="0/1" class="layui-input" autocomplete="off">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" @click="add">添加</button>
            </div>
        </div>
    </form>
    <a href="index.html" class="layui-btn layui-btn-primary">返回</a>
</div>
<script>
    // 如果我们通过全局配置了，请求的数据接口 根域名，则 ，在每次单独发起 http 请求的时候，请求的 url 路径，应该以相对路径开头，前面不能带 /  ，否则 不会启用根路径做拼接；
    Vue.http.options.root = 'http://120.79.197.130:8080/';

    // 全局启用 emulateJSON 选项:如果Web服务器无法处理编码为application/json的请求，你可以启用emulateJSON选项。
    Vue.http.options.emulateJSON = true;

    var vm = new Vue({
        el: '#app',
        data: {
            title: '',
            link: '',
            author: '',
            tag: ''
        },
        methods: {
            add() {
                this.$http.post('insertBlog',
                    {
                        title: this.title,
                        link: this.link,
                        author: this.author,
                        tag: this.tag,
                    })
                    .then(result => {
                        var result = result.body
                        if (result.code === 200) {
                            alert('添加成功！')
                        } else {
                            // 失败了
                            alert('添加失败！')
                        }
                    })
            }
        }
    })
</script>
</body>
</html>